<template>
  <div class="test-page">
    <h2>API连接测试</h2>
    
    <div class="test-section">
      <h3>后端状态检查</h3>
      <van-button @click="testConnection" :loading="testing">
        {{ testing ? '测试中...' : '测试连接' }}
      </van-button>
      <div v-if="connectionResult" class="result">
        <p><strong>状态:</strong> {{ connectionResult.status }}</p>
        <p><strong>消息:</strong> {{ connectionResult.message }}</p>
        <pre v-if="connectionResult.data">{{ JSON.stringify(connectionResult.data, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>登录测试</h3>
      <van-form @submit="testLogin">
        <van-cell-group inset>
          <van-field
            v-model="testForm.userName"
            name="userName"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请输入账号' }]"
          />
          <van-field
            v-model="testForm.userPass"
            type="password"
            name="userPass"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
        </van-cell-group>
        <van-button type="primary" native-type="submit" :loading="loginTesting" block>
          {{ loginTesting ? '登录中...' : '测试登录' }}
        </van-button>
      </van-form>
      <div v-if="loginResult" class="result">
        <p><strong>状态:</strong> {{ loginResult.status }}</p>
        <p><strong>消息:</strong> {{ loginResult.message }}</p>
        <pre v-if="loginResult.data">{{ JSON.stringify(loginResult.data, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Toast } from 'vant'

const testing = ref(false)
const loginTesting = ref(false)
const connectionResult = ref<any>(null)
const loginResult = ref<any>(null)

const testForm = reactive({
  userName: 'admin',
  userPass: '123456'
})

// 测试后端连接
const testConnection = async () => {
  testing.value = true
  connectionResult.value = null
  
  try {
    const response = await fetch('/api/BaseData/Login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        userName: 'test',
        userPass: 'test'
      })
    })
    
    console.log('连接测试响应状态:', response.status)
    
    if (response.ok) {
      const data = await response.json()
      connectionResult.value = {
        status: '连接成功',
        message: `HTTP ${response.status}`,
        data: data
      }
    } else {
      connectionResult.value = {
        status: '连接失败',
        message: `HTTP ${response.status}: ${response.statusText}`,
        data: null
      }
    }
  } catch (error) {
    console.error('连接测试错误:', error)
    connectionResult.value = {
      status: '连接错误',
      message: error instanceof Error ? error.message : '未知错误',
      data: null
    }
  } finally {
    testing.value = false
  }
}

// 测试登录
const testLogin = async () => {
  loginTesting.value = true
  loginResult.value = null
  
  try {
    const response = await fetch('/api/BaseData/Login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(testForm)
    })
    
    console.log('登录测试响应状态:', response.status)
    
    const data = await response.json()
    console.log('登录测试响应数据:', data)
    
    if (response.ok && data.code === 100) {
      loginResult.value = {
        status: '登录成功',
        message: data.message,
        data: data.data
      }
      Toast('登录测试成功')
    } else {
      loginResult.value = {
        status: '登录失败',
        message: data.message || '登录失败',
        data: data
      }
      Toast('登录测试失败')
    }
  } catch (error) {
    console.error('登录测试错误:', error)
    loginResult.value = {
      status: '登录错误',
      message: error instanceof Error ? error.message : '未知错误',
      data: null
    }
    Toast('登录测试错误')
  } finally {
    loginTesting.value = false
  }
}
</script>

<style scoped>
.test-page {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.test-section h3 {
  margin-top: 0;
  color: #1989fa;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background: #f7f8fa;
  border-radius: 4px;
}

.result pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}
</style>

